<template>
  <div id="recommend">
    <span class="recommendTitle">鹏友热搜列表</span>
    <div class="table-conBtn">
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table :data="tableData">
      <el-table-column label="序号" type="index" width="180" align="center">
      </el-table-column>
      <el-table-column
        prop="updateByName"
        label="推荐人"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="pushTime"
        label="推荐时间"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="createdTime"
        label="创建时间"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="title"
        label="文章标题"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="所属模块" min-width="100" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="modularColor(row)[0]" :style="modularColor(row)[1]">
            {{ row.modular | filterName('dapeng_info_desk') }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="此模块序号" min-width="100" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="modularColor(row)[0]" :style="modularColor(row)[1]">
            {{ row.pushOrder }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="180" align="center">
        <template slot-scope="{ row }">
          <el-button type="text" @click="sortConfig(row)">
            序号设置
          </el-button>
          <el-button type="text" @click="cancelRecommend(row)">
            取消推荐
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { modularColor } from '../types'
import {
  getRecommendList,
  setUpSort,
  unRecommend
} from '@/api/brandManage/aboutUs'
export default {
  props: ['flag'],
  components: {},
  data() {
    return {
      tableData: [],
      searchParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  watch: {
    flag() {
      this.searchList()
    }
  },
  mounted() {
    this.searchList()
  },
  methods: {
    modularColor,
    /* 列表 */
    searchList() {
      getRecommendList(this.searchParams, (res) => {
        this.tableData = res
      })
    },
    /* 排序设置 */
    sortConfig(row) {
      this.$prompt('排列序号：', '序号设置', {
        inputValue: row.pushOrder.toString(),
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[0-9]{1,2}$/,
        inputErrorMessage: '请输入0-99的整数'
      })
        .then(({ value }) => {
          let _this = this
          const obj = { id: row.id, num: value }
          setUpSort(obj, () => {
            this.$message.success('设置成功')
            _this.searchList()
          })
        })
        .catch(() => {})
    },
    /* 取消推荐 */
    cancelRecommend(row) {
      const { id } = row
      unRecommend({ id }, () => {
        this.$message.success('取消成功')
        this.$emit('updateList')
      })
    }
  }
}
</script>
<style lang="less" scoped>
.recommendTitle {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  margin-left: 30px;
}
</style>
